<h3 class="devui-h3-title">{{ 'components.design-shadow.shadowDemo.instance.title' | translate }}</h3>
<div class="modal"></div>
<code>box-shadow: $devui-shadow-length-base $devui-shadow;</code>

<h3 class="devui-h3-title">{{ 'components.design-shadow.shadowDemo.instance.description' | translate }}</h3>

<d-data-table #datatable [dataSource]="shadows" [scrollable]="true">
  <d-column
    field="name"
    header="{{ 'components.design-shadow.shadowDemo.instance.defaultTable.shadowName' | translate }}"
    [width]="'150px'"
  >
  </d-column>
  <d-column
    field="value"
    header="{{ 'components.design-shadow.shadowDemo.instance.defaultTable.themeValue' | translate }}"
    [width]="'150px'"
  >
  </d-column>
  <d-column
    field="description"
    header="{{ 'components.design-shadow.shadowDemo.instance.defaultTable.description' | translate }}"
    [width]="'200px'"
  >
  </d-column>
</d-data-table>

<h3 class="devui-h3-title">{{ 'components.design-shadow.shadowDemo.instance.description2' | translate }}</h3>
<d-data-table #datatable [dataSource]="shadowColor" [scrollable]="true">
  <thead dTableHead>
    <tr dTableRow>
      <th dHeadCell>{{ 'components.design-shadow.shadowDemo.instance.colorTable.colorVar' | translate }}</th>
      <th dHeadCell>{{ 'components.design-shadow.shadowDemo.instance.colorTable.themeValue' | translate }}</th>
      <th dHeadCell>{{ 'components.design-shadow.shadowDemo.instance.colorTable.description' | translate }}</th>
    </tr>
  </thead>
  <tbody dTableBody>
    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
      <tr dTableRow>
        <td dTableCell>{{ rowItem?.name }}</td>
        <td dTableCell>
          <div class="color-name">
            {{ rowItem?.value }}
          </div>
          <div *ngIf="rowItem?.value" class="color-cube" [ngStyle]="{ 'background-color': rowItem?.value }"></div>
        </td>
        <td dTableCell>{{ rowItem?.description }}</td>
      </tr>
    </ng-template>
  </tbody>
</d-data-table>
